<template>
  <div  style=" height: 100%;" >
    <layout  style="background-color: #42b983" @child-event="select" :user-count="userCount"  ></layout>

    <div class="home" v-if="componentValue===0">

    <print-info  class="print" ></print-info>
    <div  style="height: 50px;" ></div>
   <div class="title"  >
       <catrtion style="backdrop-filter: blur(3px); border-radius: 3%; opacity: 100%;border:#95bdab solid 1px" v-for="i in 4" :title="titles[i]" :context="contexts[i]" :active-name="activeNames[i-1]" :to-page-path="pagePath[i-1]" :icon-class="iconClasses[i-1]" ></catrtion>
    </div>

  </div>
    <LearnPage class="pub"  v-if="componentValue===1" ></LearnPage>
    <ShowPage  class="pub" v-if="componentValue===2" ></ShowPage>
    <ExchangeView  class="pub" v-if="componentValue===3" ></ExchangeView>
    <User  class="pub"  v-if="componentValue===4" > </User>
    <el-dialog  width="40%"  :visible.sync="openComnication"  >
      <template #title  style="float: left;height: 65px;font-family: 'Britannic Bold', serif;" >
       <span class="iconfont icon-bagua1"  style="float: left;font-family: 'Britannic Bold', serif;" ></span>
        <span  style="float: left;font-family: 'Britannic Bold', serif;margin-left: 5px;" >YI Chat</span>
      </template>

      <div style="width: 100%;height: 500px" >
      <div class="friendList_div" >
        <div style="width: 100%; height: 50px;background-color: #d2e3d5; border: #ffffff solid 1px;" >
           <el-input @change="selectFriend" v-model="inputFriendMessage" style="display: block; width: 75%;float: left;margin: 5px 0;" ></el-input>
            <span class="iconfont icon-jiahao" style="display: block; cursor:pointer;  width: 25%;height: 40px; float: right;margin: 5px 0;"  @click="openFindNewFriend=true" >  </span>
        </div>
        <div  style="width: 100%; height: 40px;background-color: #e5eae5;font-family: 'Britannic Bold', serif;font-size: 18px;border: #ffffff solid 1px;" >
          <div  class="select_chat_type" @click="selectChatType(false)" > 好友 </div>
          <div class="select_chat_type"  @click="selectChatType(true)"  >群聊</div>
        </div>
        <div style="height: 2px;width: 100%" ></div>
         <div style=" border: #ffffff solid 1px; height: 340px;overflow-y: auto;width: 98%; " >
         <div v-for="e in chatList" :class="'friend_item' + ( chatObject['friendId'] === e['friendId'] ? ' friend_item_bgk': '')  "  v-if="chatList!=null"  @click="selectChatItem(e)" >
           <el-badge :value="e['noReadCount']" class="item_badge" >

           </el-badge>
          <div style="width: 30%;height: 90%;float: left;border-radius: 3px;"  >
              <el-image v-if="e['avatar']!=null" :src="e['avatar']" style="width: 89%;height: 97%;border-radius: 3px;margin: 3px;" ></el-image>
          </div>
          <div style="width: 60%;float: left;"  >
            <div style="margin: 10px auto;" >  {{e['friendName']}}</div>
          </div>

        </div>
         </div>
        <div @click="openAcceptFindNewFriend=true" style="width: 95%;height: 30px;margin: 3px; cursor: pointer; font-family: 'Britannic Bold', serif; font-size: 18px; border-radius: 1px;border: #ffffff solid 1px;" >
          <el-badge :value="InfoCount" class="item_badge" >
          </el-badge>
          系统通知
        </div>
      </div>
      <div class="exchange_div" >

        <div style="width: 100%; height: 40px;background-color: #edf8ed;" >
          <div style="position: relative;left: 5px; margin: 10px" > {{this.chatObject!==undefined &&this.chatObject!="undefined"&&this.chatObject!==""&&this.chatObject!==null? this.chatObject['friendName'] +' [在线]':"" }}   </div>

        </div>
          <div class="message-content-container"  ref="scrollContainer"  @scroll="scrollSetCount" >
          <div v-for="(item, index) in messageList" :key="index" v-if="item['receiverId']==chatObject['friendId'] || item['senderId']==chatObject['friendId'] "    >
              <div class="message-item"    v-if="item['senderToken']!= currentUserToken">
                <img class="message-user-avatar" :src="item['avator']" alt="">
                <div class="message-right">
                  <div class="message-user-nickname" v-if="item['senderToken']!= currentUserToken">
                    {{ item['name'] }}
                  </div>
                  <div class="message-item-content"
                       style="border-radius: 2px 18px 18px;background-color: rgb(255, 223, 206);"
                       v-html="item.content" >
                  </div>
                </div>
              </div>

              <div class="my-message message-item" v-else>
                <img class="message-user-avatar" :src="item['avator']" alt="">
                <div class="message-item-content"
                     style="border-radius: 18px 2px 18px 18px;background-color: rgb(206, 245, 255);margin-right: 5px;"
                     v-html="item.content">
                </div>

            </div>
          </div>
        </div>
        <div style="width: 100%;height: 56px;border-radius: 1px;border: white solid 1px;" >
          <el-input    placeholder="请输入你想发送的消息" :autosize="{ minRows: 2, maxRows: 4}"  type="textarea" style="width: 290px;;float: left" v-model="inputMessage" ></el-input>
<!--      输入消息    -->
         <el-button type="info" @click="sendMessage" style="float: left;" >发送</el-button>
        </div>
      </div>
      </div>
    </el-dialog>
    <el-dialog title="查找用户"  :visible.sync="openFindNewFriend"   >
      <div>
        <el-autocomplete
            style="width: 200px"
            popper-class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入用户昵称"
            @select="handleSelect"
            clearable>
          <i
              class="el-icon-search el-input__icon"
              slot="suffix"
              @click="handleIconClick">
          </i>

          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="addr">{{ item.address }}</span>
          </template>
        </el-autocomplete>
        <div  class="new_friend_list" >
              <div v-for="e in newFriendAddList" class="new_friend_item"  @click="selectFriend(e)" >
               <div style="width: 100%;height: 20px">{{e['value']}}</div>
                <el-button size="mini" type="primary" style="width: 80%;margin: 0 auto;"  @click="addNewFriend(e)" >申请添加</el-button>
              </div>
        </div>
        </div>
    </el-dialog>

    <el-dialog  title="好友添加申请" :visible.sync="openAcceptFindNewFriend"  >
        <div style="width: 100%;height: 300px;" > 好友添加申请
          <div v-for="e in waitFriendAddList" class="new_friend_item"  >
            <div >
              <div style="width: 100%;height: 20px">{{e['userName']}}</div>
              <div> <el-button type="primary" size="mini"  @click="handleAddFriend(e,1)" style="float: left; width: 48px;"  >同意</el-button>
                <el-button type="info" size="mini" @click="handleAddFriend(e,0)" style="float: left;width: 47px;"   >取消</el-button> </div>
            </div>
          </div>
        </div>
    </el-dialog>
    <div class="exchange" >
       <div class="font_css" @click="openComnication=true" style="margin: 10px auto;" >
        <span class="iconfont icon-jiaoliuzhongxin" >
        </span>
         YI Chat
      </div>

<!--      </el-button>-->
    </div>
    <div class="show_part_content" >
      <div  class="part_tool" > 测算小工具 </div>
       <el-button  size="mini" style="margin: 3px;" @click="divineTool(1)" >八字测算</el-button>
      <el-button size="mini" style="margin: 3px;" @click="divineTool(2)"  > 姻缘测算 </el-button>
      <el-button size="mini" style="margin: 3px;" @click="toolOpen=true"  > 抽签问天 </el-button>
    </div>
<!--    打开el-dialog框-->
    <el-dialog :visible.sync="toolOpen" >
      <div style="width: 100%;height: 300px;" >
        <div style="width: 100%;height: 20px;" >
          <h4> {{ currDivineToolInfo['name'] }} </h4>
        </div>
        <div style="width: 90%;height: 200px;background-color: #eaedf1;margin: 5%" >
          {{ currDivineToolInfo['tip'] }}:
          <div>
            <el-input style="width: 80px;margin: 10px;" ></el-input>
            <el-input style="width: 80px;margin: 10px;" ></el-input>
            <el-input style="width: 80px;margin: 10px;" ></el-input>
          </div>
           <div style="width: 95%;height: 50%;padding: 1%; margin: 1%; background-color: #FFFFFF;" >
             {{ currDivineToolInfo['resTip'] }}:
           </div>

        </div>
      </div>
    </el-dialog>
   </div>

</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
import Catrtion from "@/components/catrtion.vue";
import PrintInfo from "@/components/printInfo.vue";
import Layout from "@/components/layout.vue";
import ExchangeView from "@/components/webIntri.vue";
import LearnPage from "@/components/Learn.vue";
import ShowPage from "@/components/Show.vue";
import Footer from "@/components/Footer.vue";
import User from "@/components/User.vue";
import {get, post} from "@/utils/http";
import {IpConfig} from "@/utils/IpConifg";
import {GlobalTimerManager} from "@/utils/timer";

let socket // 初始化webSocket 对象

export default {
  name: 'HomeView',
  components: {
    User,
    Footer,
    ShowPage, LearnPage, ExchangeView,
    Layout,
    PrintInfo,
    Catrtion,
    HelloWorld
  },

  data() {
    return {
      currDivineToolInfo: {
        name:'八字测算',
        tip:'请输入你的生日:',
        resTip:'',
        res:''
      },
       divineToolInfo:[
         {
           name:'八字测算',
           tip:'请输入你的生日:',
           resTip:'',
           res:''
         },
         {
           name:'姻缘测算',
           tip:'请输入你的生日:',
           resTip:'',
           res:''
         },
         {
           name:'面向预测',
           tip:'请输入你的生日',
           resTip:'',
           res:''
         }
       ],
      divineToolIdx:0,
      toolOpen:false,
      InfoCount:0, // 系统通知数量
      inputFriendMessage:'',
      chatType: false,
      openAcceptFindNewFriend:false,
      chatObject:'',// 聊天对象
      messageList:[], // 聊天信息
      state: '',
      openComnication:false,
      openFindNewFriend:false,
      currentUserToken: '',
      inputMessage:'',
      componentValue:0,
      userId:'',
      chatList:[],
      userCount:0,
      friendList:[], // 好友列表
      groupList:[], //群聊列表
      activeIndex: '1',
      waitFriendAddList:[], // 等待添加 的 用户列表
      newFriendAddList:[],
      activeIndex2: '2',
      titles:['','易经 64 卦','大衍噬法','金钱卦','梅花易数'],
      contexts:['','据《史记·周本纪》记载: 文王 其囚羑里，盖益易之八卦为六十四卦','其用四十有九。分而为二以象两，挂一以象三， 揲之以四以象四时，归奇于扐以象闰，五岁再闰，故再扐而后挂。',
        '偶向江边采白蘋，还随女伴赛江神。众中不敢分明语，暗掷金钱卜远人','梅花易数依先天八卦数理，即乾一，兑二，离三，震四，巽五，坎六，艮七，坤八，随时随地皆可起卦，取卦方式多样。'],
      backImgPath:['','','',''],
      pagePath: ['/showPage','/showPage','/showPage','/showPage'],
      activeNames: ['1','2','3','4'],
      iconClasses:['icon-bagua1','icon-zj_icon-','icon-football-pitch','icon-meihuayishu'],
      webSocketUrl: IpConfig.websocketUrl+'/myWs1',
    };
  },
  mounted() {
  let res =   JSON.parse(localStorage.getItem('token'))
    if(res !=null){
      this.currentUserToken = JSON.parse(localStorage.getItem('token'))['value']
    }
    this.getNewFriendInfo()
    this.getFriend()
    // 初始化 websocket聊天
    this.init()
    console.log("mounted")
    // this.startTimer()
  },
  created(){
  },
  methods: {

    /**
     * 定时任务
     */
    // startTimer() {
    //   // 创建连接
    //   this.timerId = GlobalTimerManager.addTimer(
    //       () => {
    //          post("/heart/beat",{}).then(e=>{
    //
    //            if(  e!=null && e['data']!=null){
    //              console.log('移除开始')
    //              console.log(e['data'])
    //               if(e['data']['currentUser']===false) {
    //
    //                 console.log('移除----------------')
    //                 localStorage.removeItem("token")
    //                 this.$router.push("/login")
    //               }
    //              this.userCount =  e['data']['userCount']
    //            }
    //            // console.log(e['data'])
    //          })
    //       },
    //       5000, // 每隔 5 秒执行一次
    //       true // 设置为间隔执行
    //   );
    //
    // },

    divineTool(e){
      this.divineToolIdx = e

      this.currDivineToolInfo = this.divineToolInfo[e-1]
      this.toolOpen = true


    } ,
    init() {
      if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        //
        let socketUrl ='ws://'+ this.webSocketUrl+'?token=' + this.currentUserToken;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen =  () =>{
          console.log("websocket已打开");
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = (msg) => {
          // console.log("收到数据====" + msg['data'] )

          let msgE =  JSON.parse( msg['data'])
          // console.log('message: '+message)
           this.messageList.push({
             senderToken:  msgE['senderToken'],
             receiverId: msgE['receiverId'],
             content: msgE['content'],
            senderId:msgE['senderId'],
             type: 1,
             status:1
           })
          // 确保DOM更新后再执行滚动
          this.$nextTick(() => {
            this.scrollToBottom();
          });
          }
        }
        //关闭事件
        socket.onclose = () => {
          console.log("websocket已关闭");
        }
        //发生了错误事件
        socket.onerror = () => {
          console.log("websocket发生了错误");
        }
      },

    /**
     *  webSocket发送信息 给好友
     */
    sendToFriend() {
      let message = { // 少一个日期的字段
        senderToken: JSON.parse(localStorage.getItem('token'))['value'],
        receiverId: this.chatObject['friendId'],
        content: this.inputMessage,
        type: 1,
        status:1
      }   //
      this.messageList.push(message)

      socket.send(JSON.stringify(message))
      // 执行 窗口的滚动方法
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      this.inputMessage = ""
    },

    debounce(func, wait) {
      let timeout;
      return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },
    showSuggestions(query) {
      this.$message({
        type:'success',
        message:'该操作必须等待1分钟，才能继续操作'
      })
      // 这里使用 query 参数来模拟搜索建议逻辑
     },
    /**
     * 设置 消息 已读
     */
    setMessageRead(){
       let senderId= this.chatObject['friendId']
        //scrollTop + clientHeight
      post('/message/setMessageStatus',{
        friendId: senderId
      }).then(e=>{
        console.log(e['data'])
      })
      this.chatObject['noReadCount'] = 0;
    },
    /**
     * 聊天内容 滑动到底部
     */
    scrollToBottom() {
      // 获取chatMessages元素
      const chatMessagesElement = this.$refs.scrollContainer;
      // 将其滚动到底部
      chatMessagesElement.scrollTop = chatMessagesElement.scrollHeight;
    },

    scrollSetCount(event) {
      // 获取滚动容器的高度和滚动高度
      if(event!==undefined){
        let bottom =  event.target.scrollHeight
        let temp = event.target.scrollTop + event.target.clientHeight
        console.log('当前滚动位置:',temp);
        let noReadCount = this.chatObject['noReadCount']
        bottom = bottom - 45* noReadCount -10
        if(  temp >=  bottom  &&  noReadCount >0 ){
          this.setMessageRead()
        }
      }
    },

    /**
     * 选择 对应的 聊天信息
     * @param e
     */
    selectChatItem(e){
      this.messageList = []
      this.chatObject = e
      // 获取聊天对象
      // 获取聊天历史记录
     if(this.chatType===false) {
       let friendId= e['friendId']
       post('/message/messageHistory', {friendId: friendId}).then(e => {
         console.log(e['data'])
         this.messageList =e['data']
         console.log("message: ")
         console.log("-------")
         console.log(this.messageList)
         this.scrollToBottom()
       })
     }
    },
    /**
     *  获取 friend 信息
     */
    getFriend(){
       post('/friend/getAllFriend',{}).then(e=>{
         console.log( e['data'] )
         if(typeof e['data'] === "string"){
            this.$message({
              message: e['data'],
              type:'info'
            })
         }else{
           this.friendList = e['data']
           this.chatList = this.friendList
         }

       })
    },

    /**
     * 查询好友
     * @param queryString
     * @param cb
     */
    querySearch(queryString, cb) {
      let results = []
      console.log(queryString)
      get('/friend/findUser',{
        nickStr: queryString
      }).then(e=>{
        console.log(e['data'])
         let count = 0;
        if(e['data']!=null){
          e['data'].forEach(e=>{
            if(count>7){ //   保证列表数量不大于15
              return;
            }
            count++;
            results.push({value: e['userName']
              ,userId: e['userId']})
          })
          // 新朋友
          this.newFriendAddList = results
          cb(results);
        }

      })

    },

    /**
     * 添加 好友
     * @param item
     */
    addNewFriend(item){
      post('/friend/add',{friendId: item['userId']}).then(e=>{
        console.log(e['data'])
        this.$message({
          type:'success',
          message: e['data']
        })
      })
    },


    /**
     * 获取待添加的好友列表
     */
    getNewFriendInfo(){
      get('/friend/getNewFriendInfo' ).then(e=>{
        console.log(e['data'])
        if(e['data']!=null){
          this.InfoCount = this.waitFriendAddList.length
          this.waitFriendAddList = e['data']
        }

      })
    },

    /**
     * 处理待添加好友
     */
    handleAddFriend(item,state){
      this.waitFriendAddList.pop(item)
      // this.waitFriendAddList.forEach(e=>{
      //   if(e['userId'] == item['userId']){
      //
      //   }
      // })
      post('/friend/handleAdd',{state:state,friendId:item['userId'] }).then(e=>{
        console.log(e['data'])

        if(e['code']===0){
          this.$message({type: 'info',message:e['msg']})
        }else{
          this.$message({type: 'info',message:e['data']})
        }
       // 更新好友列表篇
        this.getFriend()

      })

    },

    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    sendMessage(){
      console.log( 'message :'+ this.inputMessage)
      if(this.chatType === false) {
        this.sendToFriend()
      }else {

      }

    },

    /**
     * 选择 chat 类型
     * @param e
     */
    selectChatType(e){
      this.chatType = e
      if(e){
        this.chatList = this.groupList
      }else{
         this.chatList = this.friendList
      }
    },

    handleSelect(item) {
      let st = false
      console.log('选择添加的好友',item);
      this.friendList.forEach(e=>{
        if(item['userId'] === e['friendId']){
          this.$message({
            message:'该好友已存在，无需添加',
            type:'info'
          })
          st = true
        }
      })
    if(st === false) {
      this.addNewFriend(item)
    }
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    selectFriend(){


      // post('/data',{
      //
      // }).then(e=>{
      //
      // })
    },
    select(e){
         this.componentValue = e
    },
  }
}
</script>

<style>
@import "../assets/icons/font_4635820_rh1ri6tywe/iconfont.css";
@import "../assets/icons/font_4635854_f9zd31w6nis/iconfont.css";

.font_css{
  font-family: "Britannic Bold", serif;
  font-size: 13px;
}
.part_tool{
  margin-top: 10px;
  width: 100%;
  height: 30px;
  font-family: "Britannic Bold", serif;
  font-size: 13px;
}

.show_part_content {
    width: 100px;
    height:140px;
  position: fixed;
  top: 500px;
   background-color: #eaf4e9;
  border-radius: 3px;
}

.new_friend_list{
  width: 500px;
  border: #aae5a6 solid 1px;
  border-radius: 5px;
  margin: 10px auto;
  height: 240px;

}
.flex_css{
  float: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: center;
}

.new_friend_item{
  float: left;
  width: 115px;
  margin: 10px;
  height: 55px;
  border-radius: 6px;
  border: #2e3237 solid 1px;
}

.item_badge{
  float: left;
  margin-top: 0;
  width: 10px;
  height: 10px;
}
.message_show{
  width: 100%;
  margin: 4px 0;
}
.selfMessage{
  float: left;
}
.otherMessage{
  float: right;
}
.select_chat_type{
  width: 40%;
  height: 100%;
  float: left;
  margin: 5px 6px;
  transition: 0.3s;
  cursor: pointer;
}
.select_chat_type:hover{
  width: 40%;
  height: 100%;
  float: left;
  margin: 5px 6px;
  color: #42b983;
}

.friend_item{
  cursor: pointer;
  width: 90%;
  margin: 3px auto;
  height: 45px;
  /*border-radius: 5px;*/
 background-color: #FFFFFF;
}

.friend_item_bgk {
  background: #9beca1;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

.message-content-container {
  height: 390px;
  width: 97%;
  border:#90989e solid 1px;
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(243, 243, 243);
  padding: 0 5px;
  overflow-y: auto;

}

.message-content-container::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

.message-content-container::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  height: 6px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #95bdab;
}
.message-content-container::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: #ffffff;
}

.message-item {
  display: flex;
  padding-top: 10px;
  margin-bottom: 10px;
}

.my-message {
  flex-direction: row-reverse;
}

.message-right {
  margin-left: 10px;
}

.message-user-nickname {
  font-size: 15px;
}

.message-item-content {
  padding: 5px 5px;
  margin-top: 5px;
  max-width: 300px;
}

.message-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.input-container {
  position: relative;
}

.sendBtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  float: left;
  font-family: "Britannic Bold", serif;
  color: #303133;
}
.el-dialog__header {
  padding: 0;
  font-family: "Britannic Bold", serif;
}

.all-back-img {
  background-image: url("../assets/dao-back.png") ;
  background-repeat: no-repeat;
  background-size: cover;
}
.exchange{
  border-radius: 2px;border: #c1e8c6 solid 2px;
  cursor: pointer;

  position: fixed;
  top: 430px;
  right: 2px;
  width: 120px;
  height: 50px;
  transition: 0.4s;
}
.exchange:hover{
  cursor: pointer;
  background-color: #cce6ca;
  color: #050505;
}


.home{
  background-image: url("../assets/dao-back.png") ;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  opacity: 1;
  height: 840px;
  z-index: 1;
}

.pub{
  height: 700px;
}

.print{
  backdrop-filter: blur(7px);
  /*
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05);*/
  box-shadow:inset 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 50%;
  height: 120px;
  margin: 0 auto;
  border-radius: 2%;
  border: #95bdab solid 1px;
}

.title{
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
}


.is-expanded {
  width: 500px;
  height: 400px; /* 调整为你想要的扩展尺寸 */
}

/* 定义过渡效果 */
.card-expand-enter-active,
.card-expand-leave-active {
  transition: all 0.5s ease;
}

/* 扩展开始时的状态（可选，取决于你的视觉需求） */
.card-expand-enter {
  opacity: 0;
  transform: scale(0.8);
}


/* 收缩结束时的状态（可选） */
.card-expand-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.friendList_div{
  width: 30%;
  height: 500px;
  float: left;
  background-color: #f2f4f2;
}

.exchange_div{
  float: right;
  background-color: #edf8ed;
  width: 70%;
  height: 500px ;
}

</style>
